import { Comment, Avatar, Form, Button, List, Input ,message} from 'antd';
import moment from 'moment';
import { connect } from 'dva';

const { TextArea } = Input;

const CommentList = ({ comments }) => (
  <List
    dataSource={comments}
    header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
    itemLayout="horizontal"
    renderItem={props => <Comment {...props} />}
  />
);

const Editor = ({ onChange, onSubmit, submitting, value }) => (
  <div>
    <Form.Item>
      <TextArea rows={4} onChange={onChange} value={value} />
    </Form.Item>
    <Form.Item>
      <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
        Add Comment
      </Button>
    </Form.Item>
  </div>
);
@connect(({ fetch, loading }) => ({
  fetch,
  submitcomment: loading.effects['showdetails/submitcomment'],
}))

class App extends React.Component {
  state = {
    comments: [],
    submitting: false,
    value: '',
  };
  static defaultProps = {
  		card:{},
  		comments:[],
  };

  handleSubmit = () => {

  	console.log(this.state.value);
 	const {card,dispatch} = this.props;
 	const value = this.state.value;
 	const payload = {...card,value};
 	console.log("the props card",payload);
 	 dispatch({
            type: 'showdetails/submitcomment',
            payload: payload,
/*            callback: (res) => {
                if (res) {
                    console.log(res);// 请求完成后返回的结果
                }
            }*/
          })
          .then(result => {
           console.log('Tags result', result); 
           const {status} = result;
           if(status === "ok"){
              message.success('创建成功！');


           }else{
              message.success('创建fail！');
           }
         });

    if (!this.state.value) {
      console.log(this.stat.value);
      return;
    }

    this.setState({
      submitting: true,
    });

    setTimeout(() => {
      this.setState({
        submitting: false,
        value: '',
        comments: [
          {
            author: 'Han Solo',
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: <p>{this.state.value}</p>,
            datetime: moment().fromNow(),
          },
          ...this.state.comments,
        ],
      });
    }, 1000);
  };

  handleChange = e => {
    this.setState({
      value: e.target.value,
    });
  };

  render() {
    const {  submitting, value } = this.state;
    const {comments} = this.props;
    console.log("the comment is ",comments);

    return (
      <div>
        {comments.length > 0 && <CommentList comments={comments} />}
        <Comment
          avatar={
            <Avatar
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              alt="Han Solo"
            />
          }
          content={
            <Editor
              onChange={this.handleChange}
              onSubmit={this.handleSubmit}
              submitting={submitting}
              value={value}
            />
          }
        />
      </div>
    );
  }
}
export default App;